<template>
  <div>
    <nav-bar>
      <template v-slot:default>商品详情</template>
    </nav-bar>
    <div class="detail-page">
      <van-image :src="state.goods.cover_url"/>
      <van-card
          style="text-align: left"
          :num="state.goods.collects_count"
          :price="state.goods.price+ '.00'"
          :desc="state.goods.description"
          :title="state.goods.title"
      >
        <template #tags>
          <van-tag plain type="danger" style="margin-right: 10px">新书</van-tag>
          <van-tag plain type="danger">推荐</van-tag>
        </template>
        <template #footer>
          <van-button type="danger" @click="addCart">加入购物车</van-button>
          <van-button type="warning" @click="goShopCart">立即购买</van-button>
        </template>
      </van-card>
      <van-tabs>
        <van-tab title="概述">
          <div class="tab1-content" v-html="state.goods.details"/>
        </van-tab>
        <van-tab title="热评">

        </van-tab>
        <van-tab title="相关图书">
          <goods-list :goods="state.like_goods"></goods-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {useRoute} from "vue-router";
import {useRouter} from "vue-router";
import {useStore} from "@/store";
import NavBar from "@/components/common/navbar/NavBar.vue";
import {goodDetail} from "@/network/detail";
import {onMounted, watch} from "vue";
import {state} from "./state";
import GoodsList from "@/components/common/goods/GoodsList.vue";
import {showLoadingToast, showSuccessToast} from "vant";
import {addShopCart} from "@/network/shopcart";
const route = useRoute();
const router = useRouter();
const store = useStore();
watch(route, () => {
  const id = route.query.id as string;
  console.log(id);
  goodDetail(id).then((res) => {
    state.goods = res.goods;
    state.like_goods = res.like_goods;
    console.log(res);
  });
});


onMounted(() => {
  const id = route.query.id as string;
  console.log(id);
  goodDetail(id).then((res) => {
    state.goods = res.goods;
    state.like_goods = res.like_goods;
    console.log(res);
  });
});

function addCart() {
  showLoadingToast("加入购物车...");
  console.log(store);
  addShopCart({goods_id: state.goods.id!.toString(), num: "1"}).then((res) => {
    if (res.status === 201|| res.status === 204) {
      showSuccessToast("加入购物车成功");
      store.dispatch('updateCartCount');

    }else{
      showSuccessToast("下手晚了，没有商品");
    }
  });
}

function goShopCart() {
  showLoadingToast("加入购物车...");
  addShopCart({goods_id: state.goods.id!.toString(), num: "1"}).then((res) => {
    if (res.status === 201|| res.status === 204) {
      showSuccessToast("加入购物车成功");
      store.dispatch('updateCartCount');
      setTimeout(()=>{
        router.push({path: "/shopcart"});
      },500);
    }else{
      showSuccessToast("下手晚了，没有商品");
    }
  });

}
</script>

<style lang="scss">
.detail-page {
  margin-top: 48px;
  margin-bottom: 60px;

  .tab1-content {
    padding: 10px;
    margin-bottom: 50px;

    img {
      max-width: 100%;
      height: auto;
    }
  }
}

</style>